<template>
    <!-- <div>封堵白名单</div> -->
    <a-row>
      <a-col>
        <a-card :bordered="false" style="margin-bottom: 10px">
          <div class="table-page-search-wrapper">
            <a-form-model ref="ruleForm" :model="pageFilter" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-row style="display:flex">
                <a-col :span="6">
                <a-form-model-item label="预警账号">
                    <a-input placeholder="请输入任务名称" v-model="pageFilter.alertOfficeCode"/>
                </a-form-model-item>
                </a-col>
                <a-col :span="6">
                <a-form-model-item label="预警等级" style="margin-left:0px">
                  <a-select v-model="pageFilter.warning_level" allowClear placeholder="请选择" style="width:100%;">
                    <a-select-option value=" ">全部</a-select-option>
                    <a-select-option v-for="(item, key) in level" :key="key" :value="item.value">
                        {{ item.title?item.title:'' }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
                  <a-col :span="6" style="margin-left:0px">
                    <a-space :size="6">
                      <a-button type="primary" @click="onQuery" icon="search">查询</a-button>
                      <a-button @click="onResetForm" icon="reload">重置</a-button>
                    </a-space>
                  </a-col>   
              </a-row>
            </a-form-model>
          </div>
        </a-card>
        <a-card :bordered="false">
          <div>
            <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="false" :loading="loading"
              :columns="columns" :dataSource="pageData" @change="onTableChange">
              <template slot="action" slot-scope="text, record">
                    <a-button type="link" @click="MoveDetails(record)">查看</a-button>
              </template>
            </z-table>
          </div>
        </a-card>
      </a-col>
      <!-- <AddModal ref="addModalId" :title=title  @ok="onQuery" @add="onQuery"/> -->
    </a-row>
  </template>
  
  <script>
  import { getDictItemsFromCache } from '@/api/api'
//   import AddModal from '@/views/plugging/police/modules/PushAddModal'
  import { fzTurnoverLog } from '@/api/warning/WarningData.js'
  export default {
//     components: {
//     AddModal
//   },
  mounted () {
    this.onQuery()
  },
    data () {
      return {
        level: getDictItemsFromCache('early_warning_level'),
        show:false,
        labelCol: { span: 5 },
        wrapperCol: { span: 16 },
        loading: false,
        pageFilter: {
          pageNo: 1,
          pageSize: 10,
        },
        pageData: {},
        columns:[
          {
            title: '序号',
            dataIndex: 'order',
            width: 60,
            align: 'center',
            customRender: (text, record, index) =>
              `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
          },
          {
            title: '预警账号',
            dataIndex: 'alertOfficeCode',
            align: 'center',
            // width: 90,
            // customRender: (text) => {
            // return <j-ellipsis value={text} length={7} />
            // },
          },
          {
            title: '下发时间',
            dataIndex: 'warningTime',
            align: 'center',
            // width: 120,
            // customRender: (text) => {
            // return <j-ellipsis value={text} length={10} />
            // },
          },
          {
            title: '移交发起单位',
            dataIndex: 'officeNameRaise',
            align: 'center',
            // width: 120,
            // customRender: (text) => {
            // return <j-ellipsis value={text} length={10} />
            // },
          },
          {
            title: '移交目标单位',
            dataIndex: 'officeNameTo',
            align: 'center',
            // scopedSlots: { customRender: 'cycle' },
            // width:90
          },
          {
            title: '移交发起时间',
            dataIndex: 'turnOverDate',
            align: 'center',
            // scopedSlots: { customRender: 'enableStatus' },
            // width:90
          },
          {
            title: '状态',
            dataIndex: 'turnOverFlag',
            align: 'center',
            // scopedSlots: { customRender: 'a' },
            // width:90
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: { customRender: 'action' },
            width:150
          },
          
        ]
      }
    },
    methods: {
      MoveDetails(record){
        this.$router.push({
            path:'/earlyWarning/express/MoveDetails',
            query:{
                id:record.id,
                warningBaseId:record.warningBaseId
            }
        })
      },
      onQuery() {
        this.pageFilter.pageNo = 1
        this.refreshTable()
        // console.log(this.pageData);
      },
      //重置
      onResetForm() {
        this.pageFilter = {
          pageNo: 1,
          pageSize: 10,
          // departmentId: this.departmentId
        }
        this.refreshTable()
      },
    //   onSelectedRow(keys) {
    //     this.idsDTO.ids = keys
    //     this.isDisabled = keys.length > 0 ? false : true
    //     console.log(this.idsDTO.ids);
    //   },
      onTableChange(pagination, pageFilter, sorter) {
        let keyMap = { currentPage: 'pageNo' }
        let paginations = Object.keys(pagination).reduce((newData, key) => {
          let newKey = keyMap[key] || key
          newData[newKey] = pagination[key]
          return newData
        }, {})
        this.pageFilter = Object.assign({}, this.pageFilter, paginations)
        this.refreshTable()
      },
      refreshTable() {
        this.loading = true
        fzTurnoverLog(this.pageFilter).then( res => {
          if (res.success) {
            this.pageData = res.result ? res.result : {}
            this.loading = false
          } else {
            this.$message.success(res.message)
            this.loading = false
          }
        })
          .catch((e) => {
            this.loading = false
            this.$message.warn('请求失败！')
          })
      },
    }
  }
  </script>
  
  <style lang="less" scoped>
  .search-wrapper-btn {
    position: absolute;
    right: 1%;
    top: 22px;
    z-index: 100;
  }
  </style>